<template>
    <div :class="[multipage === true ? 'multi-page':'single-page', 'not-menu-page', 'home-page']">
        <a-row
            :gutter="8"
            class="head-info"
        >
            <a-card class="head-info-card">
                <a-col :span="12">
                    <div class="head-info-avatar">
                        <img
                            alt="头像"
                            :src="avatar"
                        >
                    </div>
                    <div class="head-info-count">
                        <div class="head-info-welcome">
                            {{ welcomeMessage }}
                        </div>
                        <div class="head-info-desc">
                            <p>{{ user.deptName ? user.deptName : '暂无部门' }} | {{ user.roleName ? user.roleName : '暂无角色' }}</p>
                        </div>
                        <div class="head-info-time">
                            上次登录时间：{{ user.lastLoginTime ? user.lastLoginTime : '第一次访问系统' }}
                        </div>
                    </div>
                </a-col>
            </a-card>
        </a-row>
    </div>
</template>
<script>
import HeadInfo from '@/views/common/HeadInfo';
import {mapState} from 'vuex';
import moment from 'moment';
import RunningTask from './common/RunningTask';
moment.locale('zh-cn');
export default {
    name: 'HomePage',
    components: {RunningTask, HeadInfo},
    data() {
        return {
            series: [],
            projects: [],
            todayIp: '',
            todayVisitCount: '',
            totalVisitCount: '',
            userRole: '',
            userDept: '',
            lastLoginTime: '',
            welcomeMessage: '',
            loadRepo: 0,
            htmlspan: '<span style="display:inline-block;margin-right: 5px;border-radius: 10px;width: 10px;height: 10px;background-color: ',
            legends: ['总数', '您'],
            myChart: {}
        };
    },
    computed: {
        ...mapState({
            multipage: state => state.setting.multipage,
            user: state => state.account.user
        }),
        avatar() {
            return `static/avatar/${this.user.avatar}`;
        }
    },
    created() {
        this.getRepos();
        this.loadRepo = 1;
    },
    mounted() {
        this.welcomeMessage = this.welcome();
        this.myChart = this.$echarts.init(document.getElementById('countChart'));
        this.runningProject();
    },
    methods: {
        welcome() {
            const date = new Date();
            const hour = date.getHours();
            let time = hour < 6 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 18 ? '下午好' : '晚上好')));
            return `${time}，${this.user.username}`;
        },
        getRepos() {
            this.$api.originalGet().then((r) => {
                r.data.forEach(repo => {
                    let project = {};
                    project.id = repo.id;
                    project.name = repo.name;
                    project.description = repo.description;
                    project.avatar = repo.name.substring(0, 1).toUpperCase();
                    this.projects.push(project);
                });
            }).catch(error => {
                console.log(error);
            });
        },
        runningProject() {
            let that = this;
            this.$api.getInfo(this.user.username).then((r) => {
                let data = r.data.data;
                this.todayIp = data.todayIp;
                this.todayVisitCount = data.todayVisitCount;
                this.totalVisitCount = data.totalVisitCount;
                let dateArr = [];
                let totalSeries = {name: '总数', data: [], type: 'bar'};
                let yourSeries = {name: '您', data: [], type: 'bar'};
                for (let i = 6; i >= 0; i--) {
                    let time = moment().subtract(i, 'days').format('MM-DD');
                    let contain = false;
                    for (let o of data.lastSevenVisitCount) {
                        if (o.days === time) {
                            contain = true;
                            totalSeries.data.push(o.count);
                        }
                    }
                    if (!contain) {
                        totalSeries.data.push(0);
                    }
                    dateArr.push(time);
                }
                this.series.push(totalSeries);
                for (let i = 6; i >= 0; i--) {
                    let time = moment().subtract(i, 'days').format('MM-DD');
                    let contain = false;
                    for (let o of data.lastSevenUserVisitCount) {
                        if (o.days === time) {
                            contain = true;
                            yourSeries.data.push(o.count);
                        }
                    }
                    if (!contain) {
                        yourSeries.data.push(0);
                    }
                }
                this.series.push(yourSeries);
                this.myChart.setOption({
                    title: {
                        text: '近7日负责用人单位提交记录',
                        show: true,
                        left: 10,
                        top: 10
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        },
                        formatter: function name(params) {
                            let htmlTip = '';
                            for (let i = 0; i < params.length; i++) {
                                if (i === 0) {
                                    htmlTip += params[i].axisValue + '<br />';
                                }
                                if (i === (params.length - 1)) {
                                    htmlTip += (that.htmlspan + params[i].color + ';"></span>' + params[i].seriesName + ' : ' + params[i].value);
                                } else {
                                    htmlTip += (that.htmlspan + params[i].color + ';"></span>' + params[i].seriesName + ' : ' + params[i].value + '<br />');
                                }
                            }
                            return htmlTip;
                        }
                    },
                    legend: {
                        type: 'scroll',
                        x: 'center',
                        y: 'bottom',
                        textStyle: {
                            fontSize: '12'
                        },
                        data: this.legends
                    },
                    toolbox: {
                        show: true,
                        right: 20,
                        top: 10,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: dateArr,
                        axisLabel: {
                            textStyle: {
                                fontSize: '12'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                fontSize: '12'
                            }
                        }
                    },
                    grid: {
                        left: '4%'
                    },
                    series: this.series
                }, true);
            }).catch((r) => {
                console.error(r);
                that.$message.error('获取首页信息失败');
            });
        }
    }
};
</script>
<style lang="less">
	.home-page {

		.head-info {
			margin-bottom: .5rem;

			.head-info-card {
				padding: .5rem;
				border-color: #f1f1f1;

				.head-info-avatar {
					display: inline-block;
					float: left;
					margin-right: 1rem;

					img {
						width: 5rem;
						border-radius: 2px;
					}
				}

				.head-info-count {
					display: inline-block;
					float: left;

					.head-info-welcome {
						font-size: 1.05rem;
						margin-bottom: .1rem;
					}

					.head-info-desc {
						color: rgba(0, 0, 0, .45);
						font-size: .8rem;
						padding: .2rem 0;

						p {
							margin-bottom: 0;
						}
					}

					.head-info-time {
						color: rgba(0, 0, 0, .45);
						font-size: .8rem;
						padding: .2rem 0;
					}
				}
			}
		}

		.count-info {

			.visit-count-wrapper {
				padding-left: 0 !important;

				.visit-count {
					padding: .5rem;
					border-color: #f1f1f1;

					.ant-card-body {
						padding: .5rem 1rem !important;
					}
				}
			}

			.project-wrapper {
				padding-right: 0 !important;

				.project-card {
					border: none !important;

					.ant-card-head {
						border-left: 1px solid #f1f1f1 !important;
						border-top: 1px solid #f1f1f1 !important;
						border-right: 1px solid #f1f1f1 !important;
					}

					.ant-card-body {
						padding: 0 !important;

						table {
							width: 100%;

							td {
								width: 50%;
								border: 1px solid #f1f1f1;
								padding: .6rem;

								.project-avatar-wrapper {
									display: inline-block;
									float: left;
									margin-right: .7rem;

									.project-avatar {
										color: #42b983;
										background-color: #d6f8b8;
									}
								}
							}
						}
					}

					.project-detail {
						display: inline-block;
						float: left;
						text-align: left;
						width: 78%;

						.project-name {
							font-size: .9rem;
							margin-top: -2px;
							font-weight: 600;
						}

						.project-desc {
							color: rgba(0, 0, 0, .45);

							p {
								margin-bottom: 0;
								font-size: .6rem;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
</style>
